import React, { Component } from 'react';
import { Button, Icon } from 'antd'
import QueueAnim from 'rc-queue-anim'
import TweenOne from 'rc-tween-one'
import { FormattedMessage } from 'react-intl'

class Banner extends Component {
  render () {
    const { ...currentProps } = this.props
    const { dataSource } = currentProps
    delete currentProps.dataSource
    delete currentProps.isMobile
    return (
      <div {...currentProps} {...dataSource.wrapper}>
        <QueueAnim
          key='QueueAnim'
          type={['bottom', 'top']}
          delay={200}
          {...dataSource.textWrapper}
        >
          <div key='title' {...dataSource.title}>
            <div>
              <img width='50%' src='https://s3.cn-north-1.amazonaws.com.cn/tws-upload/images/tw-logo-white.png' alt='img' />
              <p className='header-title'><FormattedMessage id='做让自己佩服的人' /></p>
              <span className='header-content' ><FormattedMessage id='不只培养全栈工程师，更是培养终身学习者' /></span>
            </div>
            <a href='https://school.thoughtworks.cn/learn/home/index.html#/app-center'>
              <Button type='primary' size='large' className='header-button'>
                <FormattedMessage id='开始学习' />
              </Button>
            </a>
          </div>
        </QueueAnim>
        <TweenOne
          animation={{
            y: '-=20',
            yoyo: true,
            repeat: -1,
            duration: 1000,
          }}
          className='banner0-icon'
          key='icon'
        >
          <Icon type='down' />
        </TweenOne>
      </div>
    )
  }
}
export default Banner
